import { useState,useEffect } from 'react';
import ThreePanel from './drag/ContentCover'

const Comp2 = () => {
    const [tranlet,setTranlet] = useState('')
   
useEffect(()=>{
var appKey = '68c484ead4c5d71d';
var key = 'F1T5UgJs3frEQnDXHItReCOcFwByHTT1';//注意：暴露appSecret，有被盗用造成损失的风险
var salt = (new Date).getTime();
var curtime = Math.round(new Date().getTime()/1000);
var query = '您好，欢迎再次使用有道智云文本翻译API接口服务';
// 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
var from = 'zh-CHS';
var to = 'en';
var str1 = appKey + truncate(query) + salt + curtime + key;
var vocabId =  '您的用户词表ID';
//console.log('---',str1);

var sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
$.ajax({
    url: 'https://openapi.youdao.com/api',
    type: 'post',
    dataType: 'jsonp',
    data: {
        q: query,
        appKey: appKey,
        salt: salt,
        from: from,
        to: to,
        sign: sign,
        signType: "v3",
        curtime: curtime,
        vocabId: vocabId,
    },
    success: function (data) {
        const str = (data?.translation && data?.translation.length) ? data?.translation[0] : ''
        //    console.log('str',str,data?.translation);
        setTranlet(str)
    } 
});

},[])


function truncate(q){
    var len = q.length;
    if(len<=20) return q;
    return q.substring(0, 10) + len + q.substring(len-10, len);
}
  return (
  <div>
  <h1>Comp2组件</h1>
  <p>原内容：您好，欢迎再次使用有道智云文本翻译API接口服务</p>
  翻译内容：{tranlet}
  {/* <ThreePanel>
        <div>我是左<span>2222</span></div>
   
        <div>他是右右右3333</div>
</ThreePanel> */}
</div>
)
}

export default Comp2
